<template>
  <div class="addEditComp">
    <el-dialog
      :before-close="handleBeforeClose"
      :title="titleStatus === 'add' ? '添加' : '编辑'"
      :visible.sync="dialogVisible"
      width="40%"
      @close="handleClose"
      @open="handleOpen"
    >
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入名称"
            style="width:80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio v-model="form.status" :label="1">显示</el-radio>
          <el-radio v-model="form.status" :label="0">隐藏</el-radio>
        </el-form-item>
        <el-form-item v-if="is_ways" label="客户端" prop="client_type">
          <el-radio v-model="form.client_type" :label="1">全部</el-radio>
          <el-radio v-model="form.client_type" :label="2">iOS</el-radio>
          <el-radio v-model="form.client_type" :label="3">android</el-radio>
        </el-form-item>
        <el-form-item v-if="is_ways" label="玩法分类" prop="class">
          <el-radio v-model="form.class" :label="1">主播</el-radio>
          <el-radio v-model="form.class" :label="2">用户</el-radio>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-upload
            :http-request="customizeUpload"
            :on-success="handleSuccess"
            :show-file-list="false"
            action=""
            class="avatar-uploader"

          >
            <img v-if="form.icon" :src="form.icon" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="is_ways" label="房间类型" prop="room_type">
          <el-select
            v-model="chooseType"
            multiple
            placeholder="请选择房间类型"
            @change="handleChangeRoomType"
          >
            <el-option
              v-for="item in roomType"
              :key="item.id"
              :label="item.room_type_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="is_props" label="特效" prop="special_effects">
          <el-upload
            :http-request="customizeUpload"
            :on-success="handleSuccess1"
            :show-file-list="false"
            action=""
            class="avatar-uploader"

          >
            <img
              v-if="form.special_effects"
              :src="form.special_effects"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="is_effects" label="音频" prop="sound_url">
          <el-upload
            :before-upload="handleBeforeUpload"
            :file-list="fileList"

            :http-request="customizeUpload"
            :limit="1"
            :on-success="handleSuccess2"
            action=""
            class="upload-demo"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传mp3文件
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model.number="form.sort"
            :min="0"
            placeholder="请输入排序"
          ></el-input-number>
        </el-form-item>
        <el-form-item v-if="is_ways" label="开启等级" prop="need_level">
          <el-input-number
            v-model.number="form.need_level"
            :min="0"
            placeholder="请输入开启等级"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="上线时间" prop="start_time">
          
          <el-date-picker v-model="form.start_time" class="marginRB10" placeholder="上线时间"
          clearable type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
        </el-form-item>
        <el-form-item label="关闭时间" prop="end_time">
          <el-date-picker v-model="form.end_time" class="marginRB10" placeholder="关闭时间"
            clearable type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
        </el-form-item>

        <el-form-item v-if="is_ways" label="操作类型" prop="oper_type">
          <el-select
            v-model="form.oper_type"
            placeholder="请选择操作类型"
            @change="handleChangeOperType"
          >
            <el-option
              v-for="item in operation"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.oper_type === 2" label="链接" prop="oper_link">
          <el-input
            v-model="form.oper_link"
            placeholder="请输入链接"
          ></el-input>
        </el-form-item>

        <el-form-item label="时间段">
          <div
            v-for="(item, index) in time_arr"
            :key="'时间段' + index"
            class="mb-3"
          >
            <el-input-number
              v-model="item.first"
              :max="parseInt(item.last)"
              :min="0"
            ></el-input-number>
            至
            <el-input-number
              v-model="item.last"
              :max="24"
              :min="parseInt(item.first)"
            ></el-input-number>
            <el-button v-if="index" @click.prevent="removeDomain(item)"
            >删除
            </el-button
            >
          </div>
          <el-button @click="addDomain">新增时间段</el-button>
        </el-form-item>

        <el-form-item v-if="is_ways" label="banner">
          <el-upload
            :http-request="customizeUpload"
            :on-success="handleSuccess4"
            :show-file-list="false"
            action=""
            class="avatar-uploader"

          >
            <img v-if="form.banner_url" :src="form.banner_url" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-button
            v-if="form.banner_url"
            type="danger"
            @click="handleRemove(1)"
          >删除
          </el-button
          >
        </el-form-item>
        <el-form-item v-if="is_ways" label="背景图">
          <el-upload
            :http-request="customizeUpload"
            :on-success="handleSuccess3"
            :show-file-list="false"
            action=""
            class="avatar-uploader"

          >
            <img
              v-if="form.background_url"
              :src="form.background_url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-button
            v-if="form.background_url"
            type="danger"
            @click="handleRemove(2)"
          >删除
          </el-button
          >
        </el-form-item>
        <el-form-item v-if="is_ways" label="宽高比" prop="aspect_ratio">
          <el-input
            v-model="form.aspect_ratio"
            placeholder="请输入宽高比"
            style="width:80%"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
        >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>


import { debounce } from 'lodash'

import { getTypeData } from '@/api/interaction/waysToPlay'

export default {
  name: 'AddEditComp',
  props: {
    titleStatus: {
      type: String,
      default: 'add'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    is_props: {
      type: Boolean,
      default: false
    },
    is_effects: {
      type: Boolean,
      default: false
    },
    is_ways: {
      type: Boolean,
      default: false
    },
    editForm: {
      type: Object
    }
  },
  data() {
    return {
      time_arr: [{ first: 0, last: 24 }],

      operation: [
        { value: 1, label: '无操作' },
        { value: 2, label: 'H5' }
      ],

      chooseType: [],
      form: {
        id: undefined,
        name: undefined,
        client_type: 1,
        status: 1,
        icon: undefined,
        special_effects: undefined,
        sound_url: undefined,
        sort: undefined,
        class: 1,
        need_level: undefined,
        oper_type: 1,
        oper_link: undefined,
        banner_url: undefined,
        background_url: undefined,
        aspect_ratio: undefined,
        room_type: undefined,
        start_time: undefined,
        end_time: undefined,
        time_slot: undefined
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        client_type: [
          { required: true, message: '请选择客户端', trigger: 'change' }
        ],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        icon: [{ required: true, message: '请上传图片', trigger: 'change' }],
        special_effects: [
          { required: true, message: '请上传特效', trigger: 'change' }
        ],
        sound_url: [
          { required: true, message: '请上传音效', trigger: 'change' }
        ],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        class: [
          { required: true, message: '请选择玩法分类', trigger: 'change' }
        ],
        need_level: [
          { required: true, message: '请输入开启等级', trigger: 'blur' }
        ],
        oper_type: [
          { required: true, message: '请选择操作类型', trigger: 'blur' }
        ],
        banner_url: [
          { required: true, message: '请上传banner', trigger: 'blur' }
        ],
        background_url: [
          { required: true, message: '请上传背景图', trigger: 'blur' }
        ],
        aspect_ratio: [
          { required: true, message: '请输入宽高比', trigger: 'blur' }
        ],
        room_type: [
          { required: true, message: '请选择房间类型', trigger: 'change' }
        ]
      },
      fileList: [],
      file_audio: {},
      roomType: []
    }
  },
  created() {
    this.handleGetType()
  },
  methods: {
    handleGetType() {
      let arr = [{ id: 0, room_type_name: '非官方房间' }]
      getTypeData().then(res => {
        this.roomType = [...arr, ...res.data]
      })
    },
    handleChangeRoomType(value) {
      this.form.room_type = value.join(',')
    },

    handleOpen() {
      if (this.editForm.id) {
        let strArr = []
        this.time_arr = []
        for (let key in this.form) {
          
          if (key === 'sound_url') {
            this.fileList = [{ url: this.editForm[key], name: '音频' }]
          }
          if(key === 'time_slot'){
            console.log(key,this.editForm[key],this.editForm[key].includes(','))
            if(this.editForm[key].includes(',')) {
              strArr = this.editForm[key].split(',')
              strArr.map((item, index) => {
                console.log(index)
                this.time_arr.push({
                  first: item.split('-')[0],
                  last: item.split('-')[1]
                })
              })
            }else {
              this.time_arr[0].first = this.editForm[key].split('-')[0];
              this.time_arr[0].last = this.editForm[key].split('-')[1];
            }
          }
          console.log(this.time_arr)
          this.form[key] = this.editForm[key]
        }
      }
    },
    handleSuccess() {
      this.form.icon = this.ossLastImgUrl
    },
    handleSuccess1() {
      this.form.special_effects = this.ossLastImgUrl
    },
    handleSuccess4() {
      this.form.banner_url = this.ossLastImgUrl
    },
    handleSuccess3() {
      this.form.background_url = this.ossLastImgUrl
    },
    handleSuccess2() {
      if (url) {
        this.form.sound_url = url
        this.file_audio.url = url
        this.fileList = [this.file_audio]
      } else {
        this.$message.error('请上传音频')
      }
    },
    handleRemove(type) {
      switch (type) {
        case 1:
          this.form.banner_url = ''
          break
        case 2:
          this.form.background_url = ''
          break
      }
    },
    submitForm: debounce(function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = Object.assign({}, this.form)
          let time_str = ''
          this.time_arr.forEach((item, index) => {
            if (index === 0) {
              time_str += `${item.first}-${item.last}`
            } else {
              time_str += `,${item.first}-${item.last}`
            }
          })
          this.form.time_slot = time_str
          this.$emit('submitForm', this.form)
        } else {

          return false
        }
      })
    }, 500),
    handleClose() {
      this.form = {
        id: undefined,
        name: undefined,
        status: 1,
        client_type: 1,
        icon: undefined,
        special_effects: undefined,
        sound_url: undefined,
        sort: undefined,
        class: 1,
        need_level: undefined,
        oper_type: 1,
        oper_link: undefined,
        banner_url: undefined,
        background_url: undefined,
        aspect_ratio: undefined,
        room_type: undefined,
        start_time: undefined,
        end_time: undefined,
        time_slot: undefined
      }
      this.fileList = []
      this.file_audio = {}

      this.$refs.ruleForm.resetFields()
      this.$emit('update:dialogVisible', false)
    },
    handleBeforeClose() {
      this.$emit('update:dialogVisible', false)
    },

    handleBeforeUpload(file) {
      this.file_audio.name = file.name
      const isMp3 = file.type === 'audio/mpeg'

      if (!isMp3) {
        this.$message.error('只能上传MP3格式的音频!')
      }
      return isMp3
    },
    handleChangeOperType(value) {
      if (value === 1) {
        this.form.oper_link = undefined
      }
    },
    removeDomain(item) {
      let index = this.time_arr.indexOf(item)
      if (index !== -1) {
        this.time_arr.splice(index, 1)
      }
    },
    addDomain() {
      this.time_arr.push({
        first: 0,
        last: 24
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.avatar-uploader .el-upload {
  border        : 1px dashed #d9d9d9;
  border-radius : 6px;
  cursor        : pointer;
  position      : relative;
  overflow      : hidden;
}

.avatar-uploader .el-upload:hover {
  border-color : #409eff;
}

.avatar-uploader-icon {
  font-size   : 28px;
  color       : #8c939d;
  width       : 100px;
  height      : 100px;
  line-height : 100px;
  text-align  : center;
}

.avatar {
  width   : 100px;
  height  : 100px;
  display : block;
}
</style>
